<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar :title="$route.name" left-arrow @click-left="$router.back()"/>
    <div>
      <img :src="info.img" alt>
    </div>
    <div>
      <p>
        <span class="span1">￥{{info.price}} </span>
        <span class="span">￥{{info.market_price}}</span>
      </p>
      <p class="p1">{{info.goodsname}}</p>
      <p class="desc" v-html="info.description"></p>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24"/>
      <van-goods-action-icon icon="cart-o" text="购物车"/>
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000"/>
      <van-goods-action-button @click="addCart" type="warning" text="加入购物车"/>
      <van-goods-action-button @click="goBuy" type="danger" text="立即购买"/>
    </van-goods-action>
  </div>
</template>

<script>
import { goodsInfo, addCart } from "../request/api";
import { mapGetters } from "vuex";
import { Dialog } from "vant";
export default {
  data() {
    return {
      info: {},
      num: 1
    };
  },
  mounted() {
    //组件一加载就调用商品详情信息
    goodsInfo({
      id: this.$route.query.id
    }).then(res => {
      console.log(res, "商品详情信息");
      if (res.code == 200) {
        this.info = res.list[0];
      }
    });
  },
  computed: {
    ...mapGetters(["getUser"])
  },
  methods: {
    //加入购物车
    addCart() {
      if (this.getUser) {
        //调用购物车接口
        addCart({
          uid: this.getUser.uid,
          goodsid: this.info.id,
          num: this.num
        }).then(res => {
          // console.log(res,"购物车");
          if (res.code == 200) {
            this.$router.push("/cart");
          }
        });
      } else {
        Dialog.confirm({
          title: "",
          message: "没有登录无权限加入购物车，你要去登录吗？"
        }).catch(() => {
          // on cancel
        });
      }
    },
    //加入订单
    goBuy() {
      this.$router.push("/order");
    }
  }
};
</script>

<style scoped>
img {
  width: 100%;
}
.desc >>> img {
  width: 100%;
}
.van-nav-bar {
  background: red;
  color: #fff;
  height: 50px;
}
.span {
  text-decoration: line-through;
}
.span1{
  color: red;
  font-size: 30px;
}
.p1{
  font-size: 16px;
  margin-left: 5px;
}
</style>
